<template>
  <div class="m_contentBox">
    <a-card :bordered="false">
      <div class="m_aCardBox">
        <!-- 查询区域 -->
        <div class="tabBox">
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :span="6">
                  <a-form-item :label="$t('message.The_name_of_the_role')">
                    <j-input :placeholder="$t('message.Please_enter')" v-model="queryParam.roleName" style="width: 100%;"></j-input>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                </a-col>
                <a-col :span="6">
                </a-col>
                <a-col :span="6">
                    <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery">{{$t('message.Search')}}</a-button>
                      <a-button @click="searchReset" style="margin-left: 8px">{{$t('message.Reset')}}</a-button>
                    </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        <!-- 查询区域-END -->
        <!-- table区域 -->
        <div class="cardBox">
          <div style="margin-bottom: 17px">
            <a-button @click="handleAdd" type="primary" icon="plus">{{$t('message.New_character')}}</a-button>
          </div>
          <a-table ref="table" size="middle" :scroll="{ x: true }" :columns="columns" :dataSource="dataSource"
                   :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                   @change="handleTableChange">
            <span slot="action" slot-scope="text,record">
              <a @click="handleUser(record)">{{$t('message.Authorized_user')}}</a>
              <a-divider type="vertical"/>
              <a @click="handlePerssion(record)">{{$t('message.Binding_permission')}}</a>
              <a-divider type="vertical"/>
              <a @click="handleEdit(record)" :disabled="record.roleCode == 'Org_Admin'">{{$t('message.Edit')}}</a>
              <a-divider type="vertical"/>
              <a @click="handleDelete(record.id)" :disabled="record.roleCode == 'Org_Admin'">{{$t('message.Delete')}}</a>
            </span>
          </a-table>
        </div>
        <!-- table区域 -->

        <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
        <role-user-modal ref="roleUserModal"></role-user-modal>
        <role-permission ref="rolePermissionModal"></role-permission>

      </div>
    </a-card>
  </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction} from '@/api/manage'
import RoleModal from './modules/RoleModal'
import RolePermission from './modules/RolePermission.vue'
import RoleUserModal from './modules/RoleUserModal.vue'

export default {
  name: 'roleList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    RoleModal,
    RolePermission,
    RoleUserModal,
  },
  data() {
    return {
      // 表头
      columns: [{
        title: this.$t('message.The_name_of_the_role'),
        align: 'center',
        dataIndex: 'roleName',
      }, {
        title: this.$t('message.Description'),
        align: 'center',
        dataIndex: 'description',
        width: '300px',
        ellipsis: true
      }, {
        title: this.$t('message.Create_date'),
        dataIndex: 'createTime',
        align: "center",
        sorter: (a, b) => (new Date(a.createTime)).getTime() - (new Date(b.createTime)).getTime(),
      }, {
        title: this.$t('message.Handle'),
        dataIndex: 'action',
        align: 'center',
        scopedSlots: {customRender: 'action'}
      }],
      url: {
        list: "/orgRole/list",
        delete: "/orgRole/delete",
      },
    }
  },
  created() {
  },
  computed: {},
  methods: {
    handleUser(record) {
      this.$refs.roleUserModal.visible = true
      this.$nextTick(() => {
        this.$refs.roleUserModal.init(record.id, record.roleName)
      })
    },
    handlePerssion(record) {
      this.$refs.rolePermissionModal.visible = true
      this.$nextTick(() => {
        this.$refs.rolePermissionModal.init(record.id, record.roleName)
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  background: #F5F8F7;
}

.tabBox {
  padding: 24px 24px 0;
  background: #FFFFFF;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 3px;
}
</style>